<template>
    <div class="searchDom">
        <span class="search-text">指令名称</span>
        <el-select v-model="search_name" filterable :clearable='true' placeholder="请选择" class="search-input dragSelectBlur"
            @change="handleQuery()">
            <el-option v-for="v in prop.sel_option.nameOptions" :key="v.id" :label="v.orderName" :value='v.id'></el-option>
        </el-select>
        <span class="search-text">下发时间</span>
        <el-date-picker v-model="search_time" class="dragDataPickerBlur" type="datetimerange" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" :default-time="[new Date(2000, 1, 1, 0, 0, 0),
            new Date(2000, 2, 1, 23, 59, 59)]" @change="handleQuery()" />
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="handleReset">重置</el-button>
    </div>
    <div style="height: calc(100% - 134px);">
        <el-table highlight-current-row :data="BackStageData" height="100%">
            <el-table-column :label="v.name" align="left" :prop="v.prop" v-for="v in tableItems" :width="v.width"
                show-overflow-tooltip>
                <template #default="scope">
                    <dict-tag v-if="v.type == 'dict'" :options="prop.sel_option[v.option]" :value="scope.row[v.prop]" />
                    <span v-else>{{ scope.row[v.prop] }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="left" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" @click="handleDetailClick(scope.row)"
                        v-hasPermi="['comlbs:orderConfiguration:detail']" icon="Document">详情</el-button>
                    <el-button link type="primary" @click="resendOrder(scope.row)"
                        v-hasPermi="['comlbs:orderConfiguration:resend']">重新下发</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
        @pagination="getTableData" />

    <!-- 详情 -->
    <el-dialog title="详情" v-model="detailOpen" width="900px" append-to-body>
        <div style="height:450px;overflow:hidden;">
            <div class="detilesearchDom">
                <span class="detilehead-text">车牌号</span>
                <el-input placeholder="请输入内容" class="detilehead-select" v-model="detaile_number"
                    :clearable='true'></el-input>
                <span class="detilehead-text">发送状态</span>
                <el-select v-model="detaile_state" :clearable='true' placeholder="请选择" class="detilehead-select"
                    @change="getdetaileTableData">
                    <el-option v-for="v in prop.sel_option.orderSendStatus" :key="v.value" :label="v.label"
                        :value='v.value'></el-option>
                </el-select>
                <el-button type="primary" icon="Search" @click="getdetaileTableData">搜索</el-button>
            </div>
            <div class="detailetableDom" style="overflow: auto;">
                <el-table :data="BackdetaileData" height="100%">
                    <el-table-column :label="v.name" align="left" :prop="v.prop" v-for="v in checkDetailItem" :key="v.prop"
                        :width="v.width" show-overflow-tooltip>
                        <template #default="scope">
                            <span
                                v-if="v.prop == 'statusName' || (v.prop == 'responseResult' && (scope.row[v.prop]?.indexOf('失败') > -1 || scope.row[v.prop]?.indexOf('成功') > -1))"
                                :style="{ color: (scope.row[v.prop]?.indexOf('失败') > -1 ? 'red' : 'green') }">
                                {{ scope.row[v.prop] }}</span>
                            <span v-else> {{ scope.row[v.prop] }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import dayjs from "dayjs"
import { getOrderRecordList, orderDetailList } from "@/api/comlbs/orderConfiguration";

const prop = defineProps({
    sel_option: { type: Object },
});
const search_name = ref('')
const search_time = ref([dayjs(new Date()).format("YYYY-MM-DD") + ' 00:00:00', dayjs(new Date()).format("YYYY-MM-DD") + ' 23:59:59'])
const BackStageData = ref([])
const tableItems = ref([
    { name: '指令名称', prop: "orderName" },
    { name: '下发数量', prop: "totalCount" },
    { name: '成功数量', prop: "successCount" },
    { name: '下发人', prop: "createUserName" },
    { name: '下发时间', prop: "createTime" }
])
const queryParams = ref({
    pageNum: 1,
    pageSize: 15,
})
const total = ref(0);

// 详情
const detailOpen = ref(false)
const detaile_number = ref('')
const detaile_state = ref('')
const selectDetailRow = ref({})
const BackdetaileData = ref([])
const checkDetailItem = ref([])
const detiletableItems = ref([
    { name: '车牌号', prop: "vehicleNum" },
    { name: '指令内容', prop: "orderContent", filterShow: ['Text_Send', 'SetParameters_Send', 'ControlSwitchStatus_Send'] }, // 文本信息下发、疲劳驾驶、超速报警、开关控制特有
    { name: '通道号', prop: "channelId", filterShow: ['TakePhotoRightAway_Send'], }, // 摄像头立即拍摄特有
    { name: '升级类型', prop: "upgradeType", filterShow: ['RemoteUpgrade_send'], }, // 远程升级特有
    { name: '发送状态', prop: "statusName" },
    { name: '应答时间', prop: "responseTime" },
    { name: '应答结果', prop: "responseResult" },
    { name: '操作人', prop: "createUserName" },
    { name: '原因', prop: "failReason" }
])

/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getTableData();
}

/** 重置按钮操作 */
function handleReset() {
    search_name.value = ''
    search_time.value.splice(0, 1, dayjs(new Date()).format("YYYY-MM-DD 00:00:00"))
    search_time.value.splice(1, 1, dayjs(new Date()).format("YYYY-MM-DD 23:59:59"))
    getTableData()
}

/** 详情按钮操作 */
function handleDetailClick(row) {
    detailOpen.value = true;
    selectDetailRow.value = row
    detaile_number.value = ''
    detaile_state.value = ''
    BackdetaileData.value = []
    checkDetailItem.value = []
    detiletableItems.value.forEach(v => {
        // 如果存在说明是特殊字段需要被筛选
        if (v.filterShow) {
            //  满足条件才展示这个字段
            if (!v.filterShow.includes(row.orderType)) return
        }
        checkDetailItem.value.push({ name: v.name, prop: v.prop })
    })
    getdetaileTableData()
}
/** 详情表格查询按钮 */
function getdetaileTableData() {
    let data = {
        status: detaile_state.value,
        vehicleNum: detaile_number.value,
        responseTime: selectDetailRow.value.responseTime,
        orderId: selectDetailRow.value.orderId,
        orderType: selectDetailRow.value.orderType,
        groupId: selectDetailRow.value.groupId
    }
    orderDetailList(data).then(res => {
        if (res.code == 200) {
            BackdetaileData.value = res.data;
        }
    })
}
/** 重新下发 */
function resendOrder(row) {
    request({
        url: "/comlbs/orderSendRecord/againSendOrder",
        method: "post",
        params: {
            orderSendRecordId: row.orderSendRecordId
        }
    }).then(res => {
        getTableData();
        if (res.code) return
        sendOrder(res.data.data);
    })
}

// 表格查询
function getTableData() {
    let query = {
        pageSize: queryParams.value.pageSize,
        pageNum: queryParams.value.pageNum,
        orderId: search_name.value,
        startTime: search_time.value?.length > 0 ? dayjs(search_time.value[0]).format("YYYY-MM-DD HH:mm:ss") : '',
        endTime: search_time.value?.length > 0 ? dayjs(search_time.value[1]).format("YYYY-MM-DD HH:mm:ss") : ''
    }
    getOrderRecordList(query).then((res) => {
        if (res.code == 200) {
            BackStageData.value = res.rows;
            total.value = Number(res.total);
        }
    })
}
getTableData();
defineExpose({
    getTableData
})
</script>
<style lang='scss' scoped>
.searchDom {
    display: flex;
    height: 50px;
    background-color: #fff;
    align-items: center;
    justify-content: left;
    margin: 10px;

    :deep(.el-input__wrapper) {
        flex-grow: unset;
        margin-right: 20px;
    }

    .search-text {
        font-size: 14px;
        width: 80px;
        font-family: 微软雅黑;
        color: #333333;
        margin: 20px 10px 20px 0;
        text-align: right;
    }

    .search-input {
        width: 175px;
    }
}

.detilesearchDom {
    .detilehead-text {
        font-size: 14px;
        font-family: 微软雅黑;
        color: #333333;
        margin: 20px;
        margin-right: 10px;
    }

    .detilehead-select {
        width: 20%;
        margin-right: 20px;
    }
}

.detailetableDom {
    margin-top: 20px;
    height: calc(100% - 51px);

    .el-table {
        flex: 1;
        border: 0 !important;
    }
}
</style>